<template>
	<view class="userDetail">
		<view class="user-info">
			<view class="avatar-container">
				<image class="avatar" :src="userInfo.avator" mode="aspectFill">
				</image>
				<view class="avatar-badge">
					<i class="fas fa-camera"></i>
				</view>
			</view>
			<view class="username">{{userInfo.nickname}}</view>
			<view class="user-intro">{{userInfo.signature}}</view>
			<!-- <view class="location">
				<i class="fas fa-map-marker-alt"></i>
				<text>地点:未知</text>
			</view> -->

			<view class="btn-group">
				<button class="follow-btn" @click="toggleFollow(userInfo.id)">{{isFollow == 1 ? "已关注" : "关注"}}</button>
				<button class="add-friend-btn">加好友</button>
			</view>
		</view>

		<view class="stats">
			<view class="stat-item">
				<view class="stat-number">{{userInfo.art}}</view>
				<view class="stat-label">文章</view>
			</view>
			<view class="stat-item">
				<view class="stat-number">{{userInfo.comment}}</view>
				<view class="stat-label">评论</view>
			</view>
			<view class="stat-item">
				<view class="stat-number">{{userInfo.collect}}</view>
				<view class="stat-label">收藏</view>
			</view>
			<view class="stat-item">
				<view class="stat-number">{{userInfo.follow}}</view>
				<view class="stat-label">关注</view>
			</view>
			<view class="stat-item">
				<view class="stat-number">{{userInfo.fans}}</view>
				<view class="stat-label">粉丝</view>
			</view>
		</view>

		<view class="tab-bar">
			<view class="tab-item " :class="{'active' : tabBarAct == 0}" @click="toggleTabBar(0)">文章</view>
			<view class="tab-item" :class="{'active' : tabBarAct == 1}" @click="toggleTabBar(1)">评论</view>
			<view class="tab-item" :class="{'active' : tabBarAct == 2}" @click="toggleTabBar(2)">收藏</view>
		</view>
		<view class="article-list" v-if="tabBarAct==0">
			<userDetailVue v-for="(item,index) in artList" :item="item" :key="index"></userDetailVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
		<view class="article-list" v-if="tabBarAct==1">
			<myCommentVue v-for="(item,index) in commentList" :item="item" :key="index"></myCommentVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
		<view class="article-list" v-if="tabBarAct==2">
			<userDetailVue v-for="(item,index) in collectList" :item="item" :key="index"></userDetailVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import userDetailVue from '@/components/art-item/user-detail.vue';
	import myCommentVue from '@/components/comment-item/my-comment.vue';
	import {
		ref
	} from 'vue';
	import {
		apiGetArticleList,
		apiGetMyArtCollect,
		apiGetMyComments,
		apiSeeInfo,
		apiToggleFollow
	} from "@/api/apis.js"
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	let tabBarAct = ref(0)
	let userInfo = ref([])
	let uid = null;
	let page = ref(1)
	let artList = ref([])
	let commentList = ref([])
	let collectList = ref([])
	let hasMore = ref(true)
	let isLoading = ref(false)
	let isFollow = ref(false)
	onLoad(e => {
		uid = e.id
		getInfoData(e.id)
		getArtList()
	})
	const toggleTabBar = (e) => {
		tabBarAct.value = e
		page.value = 1
		hasMore.value = true
		isLoading.value = false
		if (e == 0) {
			// 文章
			getArtList()
		} else if (e == 1) {
			// 评论
			getCommentList()
		} else if (e == 2) {
			//收藏
			getCollectList()
		}
	}
	const toggleFollow = async (id) => {
		await apiToggleFollow({
			id
		}).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				isFollow.value= !isFollow.value
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	// 文章列表
	const getArtList = async () => {
		await apiGetArticleList({
			id: uid,
			page: page.value
		}).then(res => {
			artList.value = res.data.data
		})
	}
	// 获取评论
	const getCommentList = async () => {
		await apiGetMyComments({
			id: uid,
			page: page.value
		}).then(res => {
			commentList.value = res.data.data
		})
	}
	const getCollectList = async () => {
		await apiGetMyArtCollect({
			id: uid,
			page: page.value
		}).then(res => {
			collectList.value = res.data.data
		})
	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		if (tabBarAct.value == 0) {
			// 文章
			await apiGetArticleList({
				id: uid,
				page: page.value
			}).then(res => {
				if (res.data.data.length > 0) {
					isLoading.value = false
					artList.value = [...artList.value, ...res.data.data]
					if (!res.data.has_more) hasMore.value = false
				} else {
					hasMore.value = false
					isLoading.value = false
				}
			})
		} else if (tabBarAct.value == 1) {
			// 评论
			await apiGetMyComments({
				id: uid,
				page: page.value
			}).then(res => {
				if (res.data.data.length > 0) {
					isLoading.value = false
					commentList.value = [...commentList.value, ...res.data.data]
					if (!res.data.has_more) hasMore.value = false
				} else {
					hasMore.value = false
					isLoading.value = false
				}
			})
		} else if (tabBarAct.value == 2) {
			//收藏
			await apiGetMyArtCollect({
				id: uid,
				page: page.value
			}).then(res => {
				if (res.data.data.length > 0) {
					isLoading.value = false
					collectList.value = [...collectList.value, ...res.data.data]
					if (!res.data.has_more) hasMore.value = false
				} else {
					hasMore.value = false
					isLoading.value = false
				}
			})
		}
	})
	const getInfoData = async (id) => {
		await apiSeeInfo({
			id
		}).then(res => {
			userInfo.value = res.data
			isFollow.value = res.data.is_followed == 1 ? true : false
		})
	}
</script>

<style scoped>
	/* 整体页面样式 */
	page {
		background-color: #ffffff;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		padding-bottom: 20px;
	}

	/* 顶部导航栏 */
	.nav-bar {
		display: flex;
		justify-content: space-between;
		padding: 12px 15px;
		align-items: center;
		background: white;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.nav-icons {
		display: flex;
		gap: 15px;
	}

	.nav-icon {
		font-size: 18px;
		color: #333;
	}

	/* 个人信息区域 */
	.user-info {
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(to bottom, #f8f9fa, #ffffff);
	}

	.avatar-container {
		position: relative;
		margin-bottom: 15px;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 3px solid white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}


	.username {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
		color: #333;
	}

	.user-intro {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
		text-align: center;
		max-width: 80%;
		line-height: 1.4;
	}

	.location {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #999;
		margin-bottom: 15px;
	}

	.location i {
		margin-right: 5px;
	}

	/* 按钮区域 */
	.btn-group {
		display: flex;
		justify-content: space-between;
		width: 80%;
		padding: 0 10px;
	}

	.follow-btn,
	.add-friend-btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 38px;
		border-radius: 20px;
		font-size: 14px;
		font-weight: 500;
		transition: all 0.3s;
	}

	.follow-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		margin-right: 10px;
		box-shadow: 0 2px 5px rgba(0, 122, 255, 0.3);
	}

	.follow-btn:active {
		background-color: #0062cc;
	}

	.add-friend-btn {
		border: 1px solid #007AFF;
		color: #007AFF;
		background-color: white;
	}

	.add-friend-btn:active {
		background-color: #f0f7ff;
	}

	/* 数据统计区域 */
	.stats {
		display: flex;
		justify-content: space-around;
		padding: 15px 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
		color: #333;
	}

	.stat-label {
		font-size: 12px;
		color: #666;
	}

	/* 导航标签栏 */
	.tab-bar {
		display: flex;
		padding: 0 20px;
		border-bottom: 1px solid #f0f0f0;
		margin-top: 10px;
		background-color: white;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.tab-item {
		margin-right: 30px;
		font-size: 16px;
		position: relative;
		padding: 15px 0;
		color: #666;
	}

	.tab-item.active {
		font-weight: bold;
		color: #007AFF;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #007AFF;
	}

	/* 文章列表区域 */
	.article-list {
		padding: 0 20px;
		margin-top: 10px;
	}



	.action-like.active .action-icon,
	.action-like.active .action-count {
		color: #ff4d4d;
	}

	.action-comment.active .action-icon,
	.action-comment.active .action-count {
		color: #007AFF;
	}

	/* 底部空间 */
	.safe-area {
		height: 20px;
	}
</style>